<template>
    <div class="light-point-container" :style="containerStyle">
        <div id="light-point-cursor" :style="cursorStyle"></div>
        <div class="light-point-element" v-for="i in number"></div>
    </div>
</template>

<script>
export default {
    name: "LightPointMouse",
    props: ["num"],
    data() {
        return {
            containerStyle: {
                backgroundPositionX: "0px",
                backgroundPositionY: "0px",
            },
            cursorStyle: {
                top: "-100px",
                left: "-100px",
            },
            lastCreateTime: 0,
            index: 0,
            number: 20,
        }
    },
    computed: {

    },
    methods: {
        randomTransition() {
            const value = Math.random() * 400-200;
            return value+"px";
        },
        getContainerPosition(x, y) {
            this.containerStyle.backgroundPositionX = x / -4 + "px";
            this.containerStyle.backgroundPositionY = y / -4 + "px";
        },
        getCursorPosition(x, y) {
            this.cursorStyle.top = y + "px";
            this.cursorStyle.left = x + "px";
        },
        createElement() {
            const current = Date.now();
            const interval = Math.floor((2000 + 1000) / this.number);
            if (current - this.lastCreateTime < interval) {
                return;
            }
            this.lastCreateTime = current;
        
            const cursor = this.$el.querySelector("#light-point-cursor");

            const etop = cursor.getBoundingClientRect().y - 50 + "px";
            const eleft = cursor.getBoundingClientRect().x + "px";

            const els = this.$el.querySelectorAll(".light-point-element");
            const el = els[this.index];
            el.style.top = etop;
            el.style.left = eleft;
            el.style.scale = Math.random()*2+1;
            el.style.animationPlayState = "running";
            el.style.setProperty("--x",this.randomTransition());
            el.style.setProperty("--y",this.randomTransition());

            this.index = ++this.index % this.number;

            setTimeout(() => el.style.animationPlayState = "paused", 2000);
        },
        listenMouseMove(event) {
            this.getContainerPosition(event.pageX, event.pageY);
            this.getCursorPosition(event.pageX, event.pageY);
            this.createElement();
        },
    },
    created() {
        if (this.$props.num) {
            this.number = this.$props.num;
        }
    },
    mounted() {
        const container = this.$el;
        container.addEventListener("mousemove", this.listenMouseMove);
    },
    beforeUnmount() {
        const container = this.$el;
        container.removeEventListener("mousemove", this.listenMouseMove);
    }
}
</script>

<style scoped>
.light-point-container {
    width: 100%;
    height: 100%;
    background-color: #222;
    background-image: linear-gradient(to right, #333 1px, transparent 1px), linear-gradient(to bottom, #333 1px, transparent 1px);
    background-size: 40px 40px;
    cursor: none;
    overflow: hidden;
}

#light-point-cursor {
    position: fixed;
    width: 25px;
    height: 25px;
    border-top: 5px solid #0f0;
    border-left: 5px solid #0f0;
    transform-origin: top;
    transform: translate(-1px, 5px) rotate(15deg);
    pointer-events: none;
    filter: drop-shadow(0 0 5px #0f0) drop-shadow(0 0 15px #0f0) drop-shadow(0 0 35px #0f0) hue-rotate(60deg);
}

#light-point-cursor::before {
    content: "";
    position: absolute;
    left: -2.5px;
    width: 5px;
    height: 40px;
    background-color: #0f0;
    transform-origin: top;
    transform: rotate(315deg);
}

.light-point-element {
    position: absolute;
    background-color: #0f0;
    pointer-events: none;
    width: 4px;
    height: 4px;
    animation: fade 2s linear infinite forwards;
    animation-play-state: paused;
    opacity: 0;
}

@keyframes fade {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    10.1% {
        opacity: 1;
        transform: translate(0,0);
    }
    90% {
        opacity: 0;
        transform:translate(var(--x),var(--y));
    }
    100% {
        opacity: 0;
    }
}
</style>
